<template>
  <div class="shop">

    <el-button size="small" type="primary" @click='exportIncomeData'>导出数据</el-button>
    <!-- <el-button-group class="btn-group">
      <el-button size='small'
        @click="changeStatus(0)">全部</el-button>
      <el-button size='small'
        @click="changeStatus(7)">近7天</el-button>
      <el-button size='small'
        @click="changeStatus(15)">近15天</el-button>
      <el-button size='small'
        @click="changeStatus(30)">近30天</el-button>
    </el-button-group> -->

    <el-date-picker v-model="form.startTime" class="picker" type="date" style="width:142px" size='small'
      value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间">
    </el-date-picker> ~ <el-date-picker v-model="form.endTime" type="date" style="width:142px"
      value-format="yyyy-MM-dd HH:mm:ss" size='small' placeholder="选择结束时间"></el-date-picker>

    <el-select v-model="form.order_type" size='small' class="detail_select" placeholder="订单类型">
      <el-option label="全部" value=""></el-option>
      <el-option label="爆款商品" value="1"></el-option>
      <el-option label="现金券" value="5"></el-option>
      <el-option label="拼团" value="10"></el-option>
      <el-option label="会员专享商品" value="15"></el-option>
      <el-option label="优惠买单" value="20"></el-option>
      <el-option label="普通商品" value="25"></el-option>
    </el-select>
    <el-select v-model="form.is_reconcile_account" size='small' class="detail_select" placeholder="对账状态">
      <el-option label="全部" value=""></el-option>
      <el-option label="已对账" value="1"></el-option>
      <el-option label="未对账" value="5"></el-option>
    </el-select>
    <!--搜索-->
    <div class="search">
      <el-input class="input" size='small' v-model="form.shop_name" placeholder="输入小店名称搜索" clearable></el-input>
      <el-button type="primary" size='small' @click="searchIncome">搜索</el-button>
    </div>

    <el-table :data="tableData" style="width:100%" max-height="680" class="incomtable" :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='时间' width='160' prop='createdAt'></el-table-column>
      <el-table-column label='类型 | 收支流水号' width='240'>
        <template slot-scope="scope">
          <p>{{ scope.row.orderTypeAndNo }}</p>
          <!-- <p v-if='scope.row.order_type==5'>现金券 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==10'>拼团 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==15'>会员专享商品 {{scope.row.order.order_no}}</p>
          <p v-if='scope.row.order_type==20'>优惠买单 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==25'>普通商品 {{scope.row.order_no}}</p> -->
        </template>
      </el-table-column>
      <el-table-column label='所属小店' width='140' prop='sellerName'></el-table-column>
      <el-table-column label='收入（元）'>
        <template slot-scope="scope">
          ¥ {{ scope.row.actualAmount }}
        </template>
      </el-table-column>
      <!-- <el-table-column label='入账（元）'>
        <template slot-scope="scope">
          ¥ {{ scope.row.settle_account }}
        </template>
      </el-table-column> -->
      <el-table-column label='平台（服务费）'>
        <template slot-scope="scope">
          ¥ {{ scope.row.platformCommission }}
        </template>
      </el-table-column>
      <el-table-column label='邀请者  （服务费）' width="93">
        <template slot-scope="scope">
          ¥ {{ scope.row.partnerCommission }}
        </template>
      </el-table-column>
      <el-table-column label='费率金额'>
        <template slot-scope="scope">
          ¥ {{ scope.row.rateAmount }}
        </template>
      </el-table-column>

      <el-table-column label='支付渠道 | 单号' width='220'>
        <template slot-scope="scope">
          <p>{{ scope.row.payMethodAndSn }}</p>

        </template>
      </el-table-column>
      <el-table-column label='订单状态'>
        <template slot-scope="scope">
          <p>{{ scope.row.settleStatusText }}</p>
          <!-- <p v-if='scope.row.check_status == 5'>未对账</p> -->
        </template>
      </el-table-column>
      <el-table-column label='操作' fixed='right' width='160'>
        <template slot-scope="scope">
          <el-button size='mini' type='danager'
            @click="openIncome(scope.row.orderId, scope.row.shop_name)">详情</el-button>
          <!-- <el-button size='mini' type='primary'
            @click="openDuizhang(scope.row.orderId, scope.row.check_status, scope.row.shop_name)">对账</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">

        <el-pagination background @current-change="pageChange" :current-page="form.pageNum" :page-size="form.pageSize"
          layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="小店收入详情" :visible.sync="isShowIncomeDetail" width="800px">
      <incomeline-detail :visible="isShowIncomeDetail" :currentId="currentId" :shopName="shopName"
        @close="isShowIncomeDetail = false" @func="cancelShowRecordDetail"></incomeline-detail>
    </jdialog>

    <jdialog title="小店订单详情" :visible.sync="isShowDZdetail" width="800px">
      <duizhangdetail :visible="isShowDZdetail" :currentId="currentId" :shopName="shopName" :status='check_status'
        @close="isShowDZdetail = false" @func="cancelShowDzDetail"></duizhangdetail>
    </jdialog>
  </div>
</template>

<script>
import incomelineDetail from './income_inlinedetail'
import duizhangdetail from './duizhangdetail';
import { orderDetail } from "@/api/order"
import { transactionDetail, transactionDetailExport } from "@/api/finance"
import { API_BASE_URL } from "@/config";
export default {
  components: {
    incomelineDetail,
    duizhangdetail
  },
  data() {
    return {
      isShowIncomeDetail: false,
      isShowDZdetail: false,
      check_status: '',
      currentId: '',
      shopName: '',
      form: {
        pageNum: 1,
        pageSize: 20,
        // type: 2, //2 线下
        // start_time: '',
        // end_time: '',
        // shop_name: '',
        // is_reconcile_account: '', //1 已对账 5未对账
        // order_type:'0',
        // isExport:''
      },
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.getshopIncomesData()
  },
  methods: {
    //订单详情
    // async getOrderInfo(id){
    //   let res = await orderDetail(id)
    //   console.log(res)
    // },
    async getshopIncomesData() {
      if (this.form.order_type == '0') {
        this.form.order_type = ''
      }
      var url = 'page=' + this.form.pageNum +
        '&shop_name=' + this.form.shop_name +
        '&is_reconcile_account=' + this.form.is_reconcile_account +
        '&type=' + this.form.type +
        '&order_type=' + this.form.order_type +
        '&is_export=' + this.form.isExport
      if (this.form.startTime) {
        url += '&startTime=' + this.form.startTime
      }
      if (this.form.endTime) {
        url += '&endTime=' + this.form.endTime
      }
      let res = await transactionDetail(this.form)
      if (res.code !== 200) {
        this.form.isExport = ''
        this.$message.error(res.message)
        return
      }
      if (this.form.isExport === 1) {
        this.form.isExport = ''
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
      }
      this.tableData = res.data.list;
      this.total = res.data.total;

    },
    async export() {
      let res = await transactionDetail(this.form)
    },
    // changeStatus (day) {
    //   console.log(day)
    //   this.form.status = day
    // },
    async exportIncomeData() {
      this.form.isExport = 1
      //  let res = await transactionDetailExport(this.form)
      window.open(
        `${API_BASE_URL}/backend/finance/shop/transactionDetail/export`
      );
      // this.getshopIncomesData()
    },
    searchIncome() {
      this.form.pageNum = 1;
      this.getshopIncomesData()
    },
    pageChange(page) {
      this.form.pageNum = page;
      this.getshopIncomesData();
    },

    openIncome(id, shopName) {
      console.log(id)
      this.currentId = id;
      this.roleName = shopName
      this.isShowIncomeDetail = true;
      // this.getOrderInfo(id)
    },
    openDuizhang(id, status, shopName) {
      this.currentId = id;
      this.shopName = shopName
      this.isShowDZdetail = true;
      this.check_status = status
    },
    cancelShowRecordDetail() {
      this.isShowIncomeDetail = false;
    },
    cancelShowDzDetail() {
      this.isShowDZdetail = false
      this.getshopIncomesData()
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },



}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .btn-group {
    margin: 0 12px;
  }

  .search {
    float: right;

    .input {
      width: 160px;
      margin-right: 2px;
    }
  }

  .pagination {
    float: right;
    margin-top: 15px;
  }

  .incomtable {
    margin-top: 20px;
  }

  .picker {
    margin-left: 12px;
  }

  .detail_select {
    margin-left: 12px;
    width: 140px;
  }
}
</style>
